<!DOCTYPE html>
<html lang="en" class="is-white">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Enable Plugins | Zoraxy Documentation
    </title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Code highlight -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <!-- additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/c.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js"></script>
    <style>
      #msgbox{
      position: fixed;
      bottom: 1em;
      right: 1em;
      z-index: 9999;
      }

      @keyframes fadeIn {
      from {
      opacity: 0;
      }
      to {
      opacity: 1;
      }
      }

      dialog[open] {
      animation: fadeIn 0.3s ease-in-out;
      }

      code{
      border-radius: 0.5rem;
      }
    </style>
    <script src="/plugins/html/assets/theme.js"></script>
  </head>
  <body>
    <div class="ts-content">
      <div class="ts-container">
        <div style="float: right;">
          <button class="ts-button is-icon" id="darkModeToggle">
            <span class="ts-icon is-moon-icon"></span>
          </button>
        </div>
        <div class="ts-tab is-pilled">
          <a href="" class="item" style="user-select: none;">
            <img id="sysicon" class="ts-image" style="height: 30px" white_src="/plugins/html/assets/logo.png" dark_src="/plugins/html/assets/logo_white.png" src="/plugins/html/assets/logo.png"></img>
          </a>
          <a href="#!" class="is-active item">
            Documents
          </a>
          <a href="https://github.com/tobychui/zoraxy/tree/main/example/plugins" target="_blank" class="item">
            Examples
            <span class="ts-icon is-arrow-up-right-from-square-icon"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="ts-divider"></div>
    <div>
      <div class="has-padded">
        <div class="ts-grid mobile:is-stacked">
          <div class="column is-4-wide">
            <div class="ts-box">
              <div class="ts-menu is-end-icon">
                <a class="item">
                  Introduction
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/1. Introduction/1. What is Zoraxy Plugin.html">
                    What is Zoraxy Plugin
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/2. Getting Started.html">
                    Getting Started
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/3. Installing Plugin.html">
                    Installing Plugin
                  </a>
                  <a class="item is-active" href="/plugins/html/1. Introduction/4. Enable Plugins.html">
                    Enable Plugins
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/5. Viewing Plugin Info.html">
                    Viewing Plugin Info
                  </a>
                </div>
                <a class="item">
                  Architecture
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/2. Architecture/1. Plugin Architecture.html">
                    Plugin Architecture
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/2. Introspect.html">
                    Introspect
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/3. Configure.html">
                    Configure
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/4. Capture Modes.html">
                    Capture Modes
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/5. Plugin UI.html">
                    Plugin UI
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/6. Compile a Plugin.html">
                    Compile a Plugin
                  </a>
                </div>
                <a class="item">
                  Basic Examples
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/3. Basic Examples/1. Hello World.html">
                    Hello World
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/2. RESTful Example.html">
                    RESTful Example
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/3. Static Capture Example.html">
                    Static Capture Example
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html">
                    Dynamic Capture Example
                  </a>
                </div>
                <a class="item" href="/plugins/html/index.html">
                  index
                </a>
                <a class="item" href="/plugins/html/zoraxy_plugin API.html">
                  zoraxy_plugin API
                </a>
              </div>
            </div>
          </div>
          <div class="column is-12-wide">
            <div class="ts-box">
              <div class="ts-container is-padded has-top-padded-large">
                <h1 id="enable-plugins">
                  Enable Plugins
                </h1>
                <p>
                  <p class="ts-text">
                    Last Update: 25/05/2025
                  </p>
                </p>
                <div class="ts-divider has-top-spaced-large"></div>
                <p>
                  <p class="ts-text">
                    To enable and assign a plugin to a certain HTTP Proxy Rule, you will need to do the following steps
                  </p>
                </p>
                <h2 id="1-create-a-tag-for-your-http-proxy-rules">
                  1. Create a tag for your HTTP Proxy Rules
                </h2>
                <p>
                  Let say you want to enable debugger on some of your HTTP Proxy Rules. You can do that by first creating a tag in the tag editor. In the example below, we will be using the tag &ldquo;debug&rdquo;. After adding the tag to the HTTP Proxy rule, you will see something like this.
                </p>
                <p>
                  <div class="ts-image is-rounded" style="max-width: 800px">
                    <img src="img/3. Enable Plugins/image-20250527193748456.png" alt="image-20250527193748456" />
                  </div>
                </p>
                <div class="ts-divider has-top-spaced-large"></div>
                <h2 id="2-enable-plugin">
                  2. Enable Plugin
                </h2>
                <p>
                  Click on the &ldquo;Enable&rdquo; button on the plugin which you want to enable
                </p>
                <p>
                  <div class="ts-image is-rounded" style="max-width: 800px">
                    <img src="img/3. Enable Plugins/image-20250527193601017.png" alt="image-20250527193601017" />
                  </div>
                </p>
                <div class="ts-divider has-top-spaced-large"></div>
                <h2 id="3-assign-plugin-to-http-proxy-rule">
                  3. Assign Plugin to HTTP Proxy Rule
                </h2>
                <p>
                  <p class="ts-text">
                    Finally, select the tag that you just created in the dropdown menu
                  </p>
                </p>
                <p>
                  <div class="ts-image is-rounded" style="max-width: 800px">
                    <img src="img/3. Enable Plugins/image-20250527194052408.png" alt="image-20250527194052408" />
                  </div>
                </p>
                <p>
                  <p class="ts-text">
                    Afterward, you will see the plugin is attached to the target tag
                  </p>
                </p>
                <p>
                  <div class="ts-image is-rounded" style="max-width: 800px">
                    <img src="img/3. Enable Plugins/image-20250527195703464.png" alt="image-20250527195703464" />
                  </div>
                </p>
                <p>
                  <p class="ts-text">
                    It means the plugin is enabled on the HTTP proxy rule
                  </p>
                </p>
              </div>
              <br>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ts-container">
      <div class="ts-divider"></div>
      <div class="ts-content">
        <div class="ts-text">
          Zoraxy © tobychui
          <span class="thisyear">
            2025
          </span>
        </div>
      </div>
    </div>
    <script>
      $(".thisyear").text(new Date().getFullYear());
    </script>
    <script>
      hljs.highlightAll();
    </script>
  </body>
</html>